<template>
  <div class="content">
<!--    @submit="handleSubmit"-->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name"/>
      </a-form-model-item>
      <a-form-model-item label="类型" prop="type" style="display: none">
        <a-select @change="handleSelectChange" v-model="form.type">
          <a-select-option value="app">应用</a-select-option>
          <a-select-option value="model">模块</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="路由">
        <a-input/>
      </a-form-model-item>
      <a-form-model-item label="URL" style="display: none">
        <a-input/>
      </a-form-model-item>
      <a-form-model-item label="图标">
        <a-input/>
      </a-form-model-item>
      <a-form-model-item label="描述">
        <a-input/>
      </a-form-model-item>
      <!--      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">-->
      <!--        <a-button type="primary" html-type="submit">-->
      <!--          Submit-->
      <!--        </a-button>-->
      <!--      </a-form-item>-->
    </a-form-model>
  </div>
</template>
<script>
import moment from 'moment'
import versionService from '@/api/system/versionService'

export default {
  name: 'AppDialog',
  props: {
    // record: {
    //   type: Object,
    //   default: () => {
    //     return {}
    //   }
    // }
  },
  data () {
    return {
      dataInfo: {},
      rules: {
        name: [
          { required: true, message: '请输入应用名称', trigger: 'blur' }
        ],
        type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
      },
      editorManage: {
        editor: null,
        html: '',
        toolbarConfig: {},
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'simple'
      },
      formLayout: 'horizontal',
      form: {}
    }
  },
  mounted () {
    // this.dataInfo = this.record
    // console.log('sourceId', this.sourceId)
    // if (this.sourceId) {
    //   this.getVersionLogById()
    // }
    // this.form = this.$form.createForm(this, { name: 'coordinated' })
    // if (this.record) {
    //   this.form.setFieldsValue({ type: 'app' })
    // }
    this.form = {
      name: '',
      type: 'app'
    }
    // this.form = this.$form.createForm(this, { name: 'coordinated' })
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    handleSelectChange (value) {
      // console.log(value)
      // this.form.setFieldsValue({
      //   note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`
      // })
    },
    async getVersionLogById () {
      const data = await versionService.getVersionLogById(this.sourceId)
      console.log('data', data)
      Object.assign(this.versionInfo, data)
      this.editorManage.html = this.versionInfo.content
    },
    onCreated (editor) {
      console.log('editor', editor)
      this.editorManage.editor = editor
    },
    handlerPublishDatePick (e) {
      this.versionInfo.publishDate = moment(e).format('YYYY-MM-DD HH:mm:ss')
      console.log('this.versionInfo.publishDate', this.versionInfo.publishDate)
      this.$forceUpdate()
    },
    getDataInfoResult () {
      const preData = {
        versionNum: this.versionInfo.versionNum,
        publishDate: this.versionInfo.publishDate,
        content: this.editorManage.html
      }
      const data = this._.cloneDeep(this.versionInfo)
      Object.assign(data, preData)
      return data
    }
  }
}
</script>

<style scoped lang="less">
.content {
  margin-top: 20px;
}

.ant-form-item {
  margin-bottom: 5px
}

.version-manage-detail {
  padding: 10px;

  .list-item {
    .item-title {
      width: 120px;
    }
  }
}
</style>
